import React, { PureComponent } from 'react';
import { connect } from '../hoc(react-redux原理)';
import { addNumber } from '../store/features/counter';

class About extends PureComponent {

  addNumber(num) {
    this.props.addNumber(num)
  }

  render() {
    const { counter } = this.props
    return (
      <div>
        <h2>About: {counter}</h2>
        <button onClick={() => this.addNumber(5)}>+5</button>
      </div>
     );
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
    counter: state.counter.counter
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    addNumber: (num) => {
      dispatch(addNumber(num))
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(About);